<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Filtering</title>
    <link rel="stylesheet" href="../assets/style.css">
    <script src="../assets/menu.js"></script>

    <!-- first import Vue -->
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <script src="../assets/vue.js"></script>
    <script src="/liquor-tree.umd.js"></script>

    <style>
      .filter-field {
        display: block;
        width: 100%;
        padding: 3px;
      }

      .tree-highlights .tree-node.matched > .tree-content {
        background: #f7f2e7;
      }

      .node-info {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div class="hello">
      Filtering. Using content of the book "JavaScript for Kids"
    </div>

    <div id="app">
      <div class="examples">
        <div class="example">
          <div class="example-description">
            <input type="text" placeholder="Type to filter..." v-model="treeFilter0" class="filter-field">
          </div>
          <div class="example-tree">
            <tree
              class="tree-highlights"
              :filter="treeFilter0"
              :options="treeOptions0" />
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            <p>
              Custom matcher. Also we hide children if node has ones. Select complexity:
              <select v-model="treeFilter1">
                <option v-for="item in new Array(20).fill('').map((a, i) => i)">{{ item }}</option>
              </select>
            </p>
          </div>
          <div class="example-tree">
            <tree :filter="treeFilter1" :options="treeOptions1" >
              <div slot-scope="{ node }" class="node-info">
                <span class="node-name">{{ node.text }}</span>
                <span class="node-complexity">{{ node.data.complexity }}</span>
              </div>
            </tree>
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            <input type="text" placeholder="Type to filter..." v-model="treeFilter2" class="filter-field">
          </div>
          <div class="example-tree">
            <tree
              :filter="treeFilter2"
              :options="treeOptions2" />
          </div>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: () => ({
          treeFilter0: '',
          treeOptions0: {
            fetchData: '/assets/data/filtering.json',
            filter: {
              emptyText: '<b>~~Overrided empty text as HTML~~</b>'
            }
          },

          treeFilter1: '',
          treeOptions1: {
            filter: {
              matcher(query, node) {
                return query == node.data.complexity
              },
              showChildren: false
            },
            fetchData: '/assets/data/filtering-custom.json'
          },

          treeFilter2: '',
          treeOptions2: {
            checkbox: true,
            fetchData: '/assets/data/filtering.json',
            filter: {
              plainList: true
            }
          },

        })
      })
    </script>

  </body>
</html>
